<template>
  <el-form-item class="widget-view"
                :class="{active: selectWidget.key == element.key, 'is_req': element.config.required}"
                :label="element.fieldName"
                @click.native.stop="handleSelectWidget(index)"
  >
    <template v-if="element.fieldType == 'input'">
      <el-input
        v-model="element.config.defaultValue"
        :placeholder="element.config.placeholder"
        disabled
      ></el-input>
    </template>

    <template v-if="element.fieldType == 'textarea'">
      <el-input type="textarea" :rows="5"
                v-model="element.config.defaultValue"
                :disabled="element.config.disabled"
                :placeholder="element.config.placeholder"
      ></el-input>
    </template>

    <template v-if="element.fieldType == 'number'">
      <el-input-number v-model="element.config.defaultValue"
                disabled></el-input-number>
    </template>

    <template v-if="element.fieldType == 'time'">
      <el-time-picker
        v-model="element.config.defaultValue"
        :is-range="element.config.isRange"
        :placeholder="element.config.placeholder"
        :start-placeholder="element.config.startPlaceholder"
        :end-placeholder="element.config.endPlaceholder"
        :readonly="element.config.readonly"
        disabled
        :editable="element.config.editable"
        :clearable="element.config.clearable"
        :arrowControl="element.config.arrowControl"
        :style="{width: element.config.width}"
      >
      </el-time-picker>
    </template>

    <template v-if="element.fieldType == 'date'">
      <el-date-picker
        v-model="element.config.defaultValue"
        :type="element.config.type"
        :is-range="element.config.isRange"
        :placeholder="element.config.placeholder"
        :start-placeholder="element.config.startPlaceholder"
        :end-placeholder="element.config.endPlaceholder"
        :readonly="element.config.readonly"
        disabled
        :editable="element.config.editable"
        :clearable="element.config.clearable"
      >
      </el-date-picker>
    </template>

    <template v-if="element.fieldType == 'select'">
      <el-select
        v-model="element.config.defaultValue"
        :disabled="element.config.disabled"
        :multiple="element.config.multiple"
        :clearable="element.config.clearable"
        :placeholder="element.config.placeholder"
      >
        <el-option v-for="item in element.config.options" :key="item.value" :value="item.value" :label="element.config.showLabel?item.label:item.value"></el-option>
      </el-select>
    </template>
    <template v-if="element.fieldType == 'autocomplete'">
      <el-autocomplete disabled></el-autocomplete>
    </template>
    <template v-if="element.fieldType=='switch'">
      <el-switch
        v-model="element.config.defaultValue"
        disabled
      >
      </el-switch>
    </template>

    <template v-if="element.fieldType == 'text'">
      <span>{{element.config.defaultValue}}</span>
    </template>

    <div class="widget-view-action" v-if="selectWidget.key == element.key">
      <el-tooltip class="item" effect="dark" content="复制" placement="bottom">
        <i class="el-icon-document btn-copy" @click.stop="handleWidgetClone(index)"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
        <i class="iconfont el-icon-delete btn-delete" @click.stop="handleWidgetDelete(index)"></i>
      </el-tooltip>
    </div>
  </el-form-item>
</template>

<script>
  export default {
    name: 'WidgetFormItem',
    props: {
      'element': {},
      'select': {},
      'index': {
        type: Number
      },
      'data': {},
      listKey: {
        type: String,
        default: 'list'
      }
    },
    components: {

    },
    data () {
      return {
        selectWidget: this.select
      }
    },
    mounted () {

    },
    methods: {
      handleSelectWidget (index) {
        this.selectWidget = this.data[this.listKey][index]
      },
      handleWidgetDelete (index) {
        if (this.data[this.listKey].length - 1 === index) {
          if (index === 0) {
            this.selectWidget = {}
          } else {
            this.selectWidget = this.data[this.listKey][index - 1]
          }
        } else {
          this.selectWidget = this.data[this.listKey][index + 1]
        }
        this.$nextTick(() => {
          this.data[this.listKey].splice(index, 1)
        })
      },
      handleWidgetClone (index) {
        const key = Date.parse(new Date().toString()) + '_' + Math.ceil(Math.random() * 99999)
        let cloneData = {
          ...this.data[this.listKey][index],
          config: {
            ...this.data[this.listKey][index].config
          },
          key,
          model: this.data[this.listKey][index].type + '_' + key,
          rules: this.data[this.listKey][index].rules || []
        }
        if (this.data[this.listKey][index].fieldType === 'radio' || this.data[this.listKey][index].fieldType === 'checkbox' || this.data[this.listKey][index].fieldType === 'select') {
          cloneData = {
            ...cloneData,
            config: {
              ...cloneData.config,
              options: cloneData.config.options.map(item => ({...item}))
            }
          }
        }

        this.data[this.listKey].splice(index, 0, cloneData)

        this.$nextTick(() => {
          this.selectWidget = this.data[this.listKey][index + 1]
        })
      },
    },
    watch: {
      select (val) {
        this.selectWidget = val
      },
      selectWidget: {
        handler (val) {
          this.$emit('update:select', val)
        },
        deep: true
      }
    }
  }
</script>

<style lang="scss">
  .widget-view {
    .el-input-number {
      width: 100%;
      >span{
        display: none;
      }
      .el-input__inner {
        text-align: left;
      }
    }

    .el-select, .el-autocomplete, .el-date-editor{
      width: 100%;
    }

  }
</style>
